<template>
  <div class="app-main">
    <tabs v-model="activePane" tabs-type="brief" :font-size="16" font-color="#888888">
      <pane label="标签一" name="1">
        <tabs v-model="activePane1" tabs-type="card" :font-size="16" :border="true">
          <pane label="内标签一" name="11">
            标签一 内部标签页内容一
          </pane>
          <pane label="内标签二" name="12">
            标签一 内部标签页内容二
          </pane>
          <pane label="内标签三" name="13">
            标签一 内部标签页内容三
          </pane>
        </tabs>
      </pane>

      <pane label="标签二" name="2" :closable="false">
        <tabs v-model="activePane2" tabs-type="card2" :font-size="16" :border="true">
          <pane label="内标签一" name="21">
            标签二 内部标签页内容一
          </pane>
          <pane label="内标签二" name="22">
            标签二 内部标签页内容二
          </pane>
          <pane label="内标签三" name="23">
            标签二 内部标签页内容三
          </pane>
        </tabs>
      </pane>

      <pane label="标签三" name="3">
        <tabs v-model="activePane3">
          <pane label="内标签一" name="31">
            标签三 内部标签页内容一
          </pane>

          <pane label="内标签二" name="32">

            <tabs v-model="activePane32" tabs-type="brief">
              <pane label="内标签一" name="32">
                标签三 内部标签二的内部标签页内容一
              </pane>
              <pane label="内标签二" name="322">
                标签三 内部标签二的内部标签页内容二
              </pane>
              <pane label="内标签三" name="323">
                标签三 内部标签二的内部标签页内容三
              </pane>
            </tabs>
          </pane>

          <pane label="内标签三" name="33">

            <tabs v-model="activePane33" tabs-type="brief" :border="true">
              <pane label="内标签一" name="331">
                标签三 内部标签三的内部标签页内容一
              </pane>
              <pane label="内标签二" name="332">
                标签三 内部标签三的内部标签页内容二
              </pane>
              <pane label="内标签三" name="333">
                标签三 内部标签三的内部标签页内容三
              </pane>
            </tabs>
          </pane>
        </tabs>
      </pane>
    </tabs>
  </div>
</template>

<script>
// 引入相应组件  根据项目实际情况修改组件引用路径
import Tabs from './tabs/tabs.vue'
import Pane from './tabs/pane.vue'
export default {
  name: 'Test2',
  components: {
    Tabs,
    Pane
  },
  data() {
    return {
      activePane: '3',
      activePane1: '11',
      activePane2: '22',
      activePane3: '33',
      activePane32: '322',
      activePane33: '333'
    }
  }
}
</script>
// 引入标签页样式文件
<style>
@import './tabs.scss';  // 根据实际情况修改样式文件引入路径
</style>
